<template>
    <div>
        {{ computedName }} 
        <!-- 点击按钮，调用changeName方法 -->
        <button @click="changeName" >an Niu </button>
        <ul>
            <!-- 遍历filteArr数组，生成li元素 -->
            <li v-for="(item,index) in filteArr" :key="index">
               <!-- 根据index的奇偶性，设置span元素的class -->
               <span :class="{red:index%2==1, size:computedSize,bold:currentClass}"> {{ item }}</span>
            </li>
        </ul>

        <!-- <span :class="classObject">测试动态样式</span> -->
        <!-- 如果arrReact数组的长度大于13，则添加red类名，否则不添加 -->
<span :class="[arrReact.length>13 ? 'red' :'','size','bold']">数组的形式</span>
      </div>
</template>

<script setup>
// 导入vue中的computed、ref、reactive函数
import {computed,ref,reactive} from 'vue'

// 定义firstName和secName为响应式数据
// 定义一个名为firstName的响应式变量，初始值为'Feng'
const firstName = ref('Feng')
// 定义一个名为secName的响应式变量，初始值为'An'
const secName = ref('An')

// 定义arrReact为响应式数组
const arrReact = reactive([1,2,3,4,5,6,7,10,11,12,100,200,400])
// 定义currentClass为响应式数据
const currentClass =ref(false)

// 定义isActive和error为响应式数据
// 定义一个响应式变量isActive，初始值为true
const isActive = ref(true)
// 定义一个响应式变量error，初始值为空对象
const error = ref({})

// 动态样式
// 定义一个计算属性classObject，返回一个对象
const classObject = computed(() => ({
  // 如果isActive为true且error为false，则active为true
  active: isActive.value && !error.value,
  // 如果error为true且error.type为fatal，则text-danger为true
  'text-danger': error.value && error.value.type === 'fatal'
}))

// 计算computedSize
const computedSize = computed(()=>{
 // 计算arrReact数组的长度
 const len = arrReact.length;
 // 打印len是否大于13
 console.log('len > 13', len > 13, len);
    // 返回len是否大于13
    return  len > 13
})

// 计算filteArr
const filteArr = computed(()=>{
    // 过滤arrReact数组中大于等于10的元素
    const arr = arrReact.filter(item=>item>=10)
    // 返回过滤后的数组
    return arr
})

// 计算computedName
// 定义一个计算属性computedName
const computedName = computed(()=>{
    // 打印computedName
    console.log('computedName');
    // 返回一个字符串，其中包含secName.value、firstName.value和两个星号
    return `100${secName.value}**${firstName.value}` 
})

// 改变名字
// 定义一个函数changeName
const changeName = ()=>{
            // 打印secName的值
            console.log(secName);
        
            // 将secName的值设置为随机数
            secName.value=Math.random()

            // 将500添加到arrReact数组中
            arrReact.push(500)
            // 将currentClass的值取反
            currentClass.value = !currentClass.value

            // 打印currentClass的值取反后的结果
            console.log('currentClass.value', !currentClass.value);

            // 如果currentClass的值取反后为true，则将error的type设置为'fatal'，否则设置为空字符串
            error.value.type = !currentClass.value ? 'fatal':''
        }

</script>
<style scoped>
.red {
    color: red;
}
.size {font-size: 33px;}
.bold{font-weight:bold;}

.active {color:green;}
.text-danger {color:yellow;font-size:40px;}
</style>                                   